<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .kuang {
      text-align: center;
      margin-top: 0px;
    }

    #mess {
      text-align: center
    }

    .value {
      width: 200px;
      height: 40px;
      border: 1px solid;
      text-align: center;
      line-height: 40px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="kuang">
    <div class="value" id="value1">小明小明</div>
    <div class="value" id="value2">大胸大胸</div>
    <div class="value" id="value3">小张小张</div>
  </div>
  <div id="mess">正在连接...</div>

  <script>
    var mess = document.getElementById("mess");
    if (window.WebSocket) {
      var ws = new WebSocket('ws://127.0.0.2:1234');

      ws.onopen = function (e) {
        console.log("连接服务器成功");
        ws.send("game1-连接服务器成功");
      }
      ws.onclose = function (e) {
        console.log("服务器关闭");
      }
      ws.onerror = function () {
        console.log("连接出错");
      }

      ws.onmessage = function (e) {
        var time = +new Date();
        mess.innerHTML += time + "的消息：" + e.data + "<br>"
      }

      document.querySelector(".kuang").onclick = function (e) {
        ws.send(`game1点击了 ${e.target.innerHTML}`);
      }
    }
  </script>
</body>

</html>